<template>
    <!-- 人才库新增页面 -->
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition" label-width="70px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="姓名" prop="fullName">
                        <el-input v-model="form.fullName" placeholder="请输入姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="form.gender">
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="身份证" prop="idNumber">
                        <el-input v-model="form.idNumber" placeholder="请输入身份证号码" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="form.age" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="民族" prop="ethnicity">
                        <el-select v-model="form.ethnicity" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in optionsEthnicity" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="学历" prop="education">
                        <el-select v-model="form.education" placeholder="请选择" style="width:100%">
                            <el-option label="初中" value="初中"></el-option>
                            <el-option label="高中" value="高中"></el-option>
                            <el-option label="专科" value="专科"></el-option>
                            <el-option label="本科" value="本科"></el-option>
                            <el-option label="研究生" value="研究生"></el-option>
                            <el-option label="博士" value="博士"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="电话" prop="contactNumber">
                        <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="专业" prop="major">
                        <el-input v-model="form.major" placeholder="请输入专业" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="地址" prop="homeAddress">
                        <el-input v-model="form.homeAddress" placeholder="请输入身份证家庭地址" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="居住地" prop="residentialAddress">
                        <el-input v-model="form.residentialAddress" placeholder="请输入实际居住地" />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="联系人" prop="emergencyContactPerson">
                        <el-input v-model="form.emergencyContactPerson" placeholder="请输入紧急联系人" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="联系电话" prop="emergencyContactNumber">
                        <el-input v-model="form.emergencyContactNumber" placeholder="请输入紧急联系电话" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="部门" prop="department">
                        <treeselect v-model="form.deptid" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"
                            @select="DRHA_EFaultModeTree_handleSelect" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="岗位" prop="position">
                        <el-input v-model="form.position" placeholder="请输入岗位" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="二次入职" prop="secondemployment">
                        <el-input v-model="form.secondemployment" placeholder="请输入二次入职的情况" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="农村医保" prop="ruralMedicalInsurance">
                        <el-radio-group v-model="form.ruralMedicalInsurance">
                            <el-radio label="是">已缴纳</el-radio>
                            <el-radio label="否">未缴纳</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="住宿" prop="accommodation">
                        <el-radio-group v-model="form.accommodation">
                            <el-radio label="是">是</el-radio>
                            <el-radio label="否">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-divider content-position="left">受教情况</el-divider>
            <el-row style="background-color: aliceblue;">
                <el-form-item label="受教时间" prop="educationtime1">
                    <el-input v-model="form.educationtime1" placeholder="受教1年月,格式2010.9-2013.7" />
                </el-form-item>
                <el-form-item label="学校名称" prop="school1">
                    <el-input v-model="form.school1" placeholder="请输入学校1名称" />
                </el-form-item>
                <el-form-item label="主要表现" prop="performance1">
                    <el-input v-model="form.performance1" placeholder="请输入主要表现1" />
                </el-form-item>
            </el-row>
            <el-row style="background-color: azure;">
                <el-form-item label="受教时间"  prop="educationtime2">
                    <el-input v-model="form.educationtime2" placeholder="受教2年月,格式2010.9-2013.7" />
                </el-form-item>
                <el-form-item label="学校名称" prop="school2">
                    <el-input v-model="form.school2" placeholder="请输入学校2名称" />
                </el-form-item>
                <el-form-item label="主要表现" prop="performance2">
                    <el-input v-model="form.performance2" placeholder="请输入主要表现2" />
                </el-form-item>
            </el-row>
            <el-row style="background-color: aliceblue;">
                <el-form-item label="受教时间" prop="educationtime3">
                    <el-input v-model="form.educationtime3" placeholder="受教3年月,格式2010.9-2013.7" />
                </el-form-item>
                <el-form-item label="学校名称" prop="school3">
                    <el-input v-model="form.school3" placeholder="请输入学校3名称" />
                </el-form-item>
                <el-form-item label="主要表现" prop="performance3">
                    <el-input v-model="form.performance3" placeholder="请输入主要表现3" />
                </el-form-item>
            </el-row>
            <el-divider content-position="left">工作经验</el-divider>
            <el-row style="background-color: azure;">
                <el-form-item label="工作起止" prop="worktime1">
                    <el-input v-model="form.worktime1" placeholder="工作1起止日期,格式2010.9-2013.7" />
                </el-form-item>
                <el-form-item label="公司名称" prop="company1">
                    <el-input v-model="form.company1" placeholder="请输入公司1名称" />
                </el-form-item>
                <el-form-item label="职位" prop="position1">
                    <el-input v-model="form.position1" placeholder="请输入职位1" />
                </el-form-item>
                <el-form-item label="离职原因" prop="leavereason1">
                    <el-input v-model="form.leavereason1" placeholder="请输入离职原因1" />
                </el-form-item>
            </el-row>
            <el-row style="background-color: aliceblue;">
                <el-form-item label="工作起止" prop="worktime2">
                    <el-input v-model="form.worktime2" placeholder="工作2起止日期,格式2010.9-2013.7" />
                </el-form-item>
                <el-form-item label="公司名称" prop="company2">
                    <el-input v-model="form.company2" placeholder="请输入公司2名称" />
                </el-form-item>
                <el-form-item label="职位" prop="position2">
                    <el-input v-model="form.position2" placeholder="请输入职位2" />
                </el-form-item>
                <el-form-item label="离职原因" prop="leavereason2">
                    <el-input v-model="form.leavereason2" placeholder="请输入离职原因2" />
                </el-form-item>
            </el-row>
            <el-row style="background-color: azure;">
                <el-form-item label="工作起止" prop="worktime3">
                    <el-input v-model="form.worktime3" placeholder="工作3起止日期,格式2010.9-2013.7" />
                </el-form-item>
                <el-form-item label="公司名称" prop="company3">
                    <el-input v-model="form.company3" placeholder="请输入公司3名称" />
                </el-form-item>
                <el-form-item label="职位" prop="position3">
                    <el-input v-model="form.position3" placeholder="请输入职位3" />
                </el-form-item>
                <el-form-item label="离职原因" prop="leavereason3">
                    <el-input v-model="form.leavereason3" placeholder="请输入离职3原因" />
                </el-form-item>
            </el-row>
            <el-row>
                
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="form.remarks" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-form-item label="照片" prop="img">
                    <userAvatar :user="form" @success="uoloadSuccess" />
                </el-form-item>
            </el-row>
        </el-form>

        <el-button style="width: 100%;" :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>



    </div>
</template>
  
<script>
import { listTalentpool, getTalentpool, delTalentpool, addTalentpool, updateTalentpool } from "@/api/business/talentpool";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import userAvatar from "../employee/avatar";

export default {
    name: "talentPoolAdd",
    components: { Treeselect, userAvatar },
    data() {
        return {
            // 按钮loading
            buttonLoading: false,
            // 表单参数
            form: {
                accommodation: "否",
                gender: "男",
                ruralMedicalInsurance: "是"
            },
            // 表单校验
            rules: {
                fullName: [
                    {
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur",
                    },
                ],
                gender: [
                    {
                        required: true,
                        message: "性别能为空",
                        trigger: "blur",
                    },
                ],
                age: [
                    {
                        required: true,
                        message: "年龄能为空",
                        trigger: "blur",
                    },
                ],
                idNumber: [
                    {
                        required: true,
                        message: "身份证不能为空",
                        trigger: "blur",
                    },
                ],
                education: [
                    {
                        required: true,
                        message: "学历不能为空",
                        trigger: "blur",
                    },
                ],
                contactNumber: [
                    {
                        required: true,
                        message: "联系电话不能为空",
                        trigger: "blur",
                    },
                ],
                ethnicity: [
                    {
                        required: true,
                        message: "名族不能为空",
                        trigger: "change",
                    },
                ],
            },
            // 部门树选项
            deptOptions: undefined,
            optionsEthnicity: [
                { value: "汉族", label: "汉族" },
                { value: "蒙古族", label: "蒙古族" },
                { value: "回族", label: "回族" },
                { value: "藏族", label: "藏族" },
                { value: "维吾尔族", label: "维吾尔族" },
                { value: "苗族", label: "苗族" },
                { value: "彝族", label: "彝族" },
                { value: "壮族", label: "壮族" },
                { value: "布依族", label: "布依族" },
                { value: "朝鲜族", label: "朝鲜族" },
                { value: "满族", label: "满族" },
                { value: "侗族", label: "侗族" },
                { value: "瑶族", label: "瑶族" },
                { value: "白族", label: "白族" },
                { value: "土家族", label: "土家族" },
                { value: "哈尼族", label: "哈尼族" },
                { value: "哈萨克族", label: "哈萨克族" },
                { value: "傣族", label: "傣族" },
                { value: "黎族", label: "黎族" },
                { value: "傈僳族", label: "傈僳族" },
                { value: "佤族", label: "佤族" },
                { value: "畲族", label: "畲族" },
                { value: "高山族", label: "高山族" },
                { value: "拉祜族", label: "拉祜族" },
                { value: "水族", label: "水族" },
                { value: "东乡族", label: "东乡族" },
                { value: "纳西族", label: "纳西族" },
                { value: "景颇族", label: "景颇族" },
                { value: "柯尔克孜族", label: "柯尔克孜族" },
                { value: "土族", label: "土族" },
                { value: "达斡尔族", label: "达斡尔族" },
                { value: "仫佬族", label: "仫佬族" },
                { value: "羌族", label: "羌族" },
                { value: "布朗族", label: "布朗族" },
                { value: "撒拉族", label: "撒拉族" },
                { value: "毛南族", label: "毛南族" },
                { value: "仡佬族", label: "仡佬族" },
                { value: "锡伯族", label: "锡伯族" },
                { value: "阿昌族", label: "阿昌族" },
                { value: "普米族", label: "普米族" },
                { value: "塔吉克族", label: "塔吉克族" },
                { value: "怒族", label: "怒族" },
                { value: "乌孜别克族", label: "乌孜别克族" },
                { value: "俄罗斯族", label: "俄罗斯族" },
                { value: "鄂温克族", label: "鄂温克族" },
                { value: "德昂族", label: "德昂族" },
                { value: "保安族", label: "保安族" },
                { value: "裕固族", label: "裕固族" },
                { value: "京族", label: "京族" },
                { value: "塔塔尔族", label: "塔塔尔族" },
                { value: "独龙族", label: "独龙族" },
                { value: "鄂伦春族", label: "鄂伦春族" },
                { value: "赫哲族", label: "赫哲族" },
                { value: "门巴族", label: "门巴族" },
                { value: "珞巴族", label: "珞巴族" },
                { value: "基诺族", label: "基诺族" },
            ],
            labelPosition: "left"
        };
    },
    watch: {
        'form.idNumber': function (newVal) {
            if (this.validateIDCard(newVal)) {
                this.form.age = this.getAgeFromIDCard(newVal);
            } else {
                this.form.age = 0;
            }
        }
    },
    created() {

        this.getDeptTree();
    },
    methods: {
        //头像上传成功
        uoloadSuccess(imgUrl) {
            this.form.avatar = imgUrl;
            this.form.img = imgUrl;
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                fullName: undefined,
                department: undefined,
                position: undefined,
                age: 0,
                gender: undefined,
                ethnicity: undefined,
                idNumber: undefined,
                homeAddress: undefined,
                residentialAddress: undefined,
                contactNumber: undefined,
                emergencyContactPerson: undefined,
                emergencyContactNumber: undefined,
                education: undefined,
                major: undefined,
                ruralMedicalInsurance: undefined,
                accommodation: undefined,
                roomNumber: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                delFlag: undefined,
                secondemployment: undefined,
                img: undefined,
                remarks: undefined
            };
            //console.log(this.form)
            this.resetForm("form");
        },


        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    this.buttonLoading = true;
                    addTalentpool(this.form)
                        .then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        })
                        .finally(() => {
                            this.buttonLoading = false;
                        });
                }
            });
        },
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                console.log(response)
                this.deptOptions = response.data;
            });
        },
        DRHA_EFaultModeTree_handleSelect(node, instanceId) {
            this.form.department = node.label;
        },
        //身份证验证
        validateIDCard(idCard) {
            const reg = /^\d{17}(\d|X)$/;
            if (!reg.test(idCard)) {
                return false;
            }
            return true;
        },
        //根据身份证获取年龄的代码
        getAgeFromIDCard(idCard) {
            const birthYear = parseInt(idCard.substring(6, 10));
            const now = new Date();
            const currentYear = now.getFullYear();
            return currentYear - birthYear;
        }

    },
};
</script>
  
